<%@ page import="com.lm56.web.network.domain.ShippingType" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<head>
    <title>我的资料</title>
    <link href="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="${ctx}statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput-typeahead.css">
    <link href="${ctx}/statics/styles/typeaheadjs.css" rel="stylesheet"/>
    <link rel="stylesheet"
          href="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/css/bootstrap-select.min.css">
</head>


<div class="container bs-sidenav">
    <div class="row">
        <div class="col-sm-10">
            <ol class="breadcrumb">
                <li class="active"><a>我的资料</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-10">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">我的资料</div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <c:if test="${success!=null}">
                            <div style="padding-left: 10px;padding-right: 10px"><div class="alert alert-success">保存成功</div></div>
                        </c:if>
                    </div>
                    <div class="row">

                        <sf:form class="form-horizontal" role="form" action="${ctx}/workbench/profile" method="post" id="userForm"
                                 commandName="userForm">
                            <div class="panel">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label class="control-label col-sm-2">帐户类型</label>

                                        <div class="col-sm-4">
                                            <input type="hidden" value="${userForm.userType}" name="userType">
                                            <input type="text" class="form-control"
                                                   value='<c:choose><c:when test="${userForm.userType==1}">公司</c:when><c:when test="${userForm.userType==2}">发货人</c:when><c:when test="${userForm.userType==3}">收货人</c:when> <c:when test="${userForm.userType==4}">司机</c:when><c:when test="${userForm.userType==5}">其他</c:when></c:choose>'
                                                   readonly>
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <label for="inputPhone" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>注册手机:</label>

                                        <div class="col-md-4">
                                            <input id="inputPhone" name="phoneNo" type="text" class="form-control"
                                                   pattern="^1[0-9]{10}$" placeholder="请输入手机号码"
                                                   value="${userForm.phoneNo}" data-minlength="5"
                                                   data-pattern-error="请输入正确的手机号码" readonly/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="phoneNo" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputEmail" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>电子邮箱:</label>

                                        <div class="col-md-4">
                                            <input id="inputEmail" name="email" type="email" class="form-control"
                                                   placeholder="example@qq.com" value="${userForm.email}"/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="email" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <c:if test="${userForm.userType==1}">


                            <!--公司注册内容-->
                            <div class="panel" id="divCompanyForm">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="inputCompanyLocation" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>公司地址:</label>

                                        <div class="col-md-4">
                                            <div class="input-group">
                                                <input id="inputCompanyLocation" type="text" class="form-control "
                                                       value="${userForm.companyLocation.locationName}"
                                                       name="companyLocation.locationName"
                                                       placeholder="如:广州" readonly/>
                                                <input id="inputCompanyLocationHidden" name="companyLocation.locationId"
                                                       type="hidden" value="${userForm.companyLocation.locationId}"/>

                                                <div class="input-group-btn">
                                                    <button id="btnCompanyLocation" class="btn btn-default"
                                                            type="button"><span
                                                            class="glyphicon glyphicon-globe"></span></button>
                                                </div>
                                            </div>
                                            <div class="help-block with-errors">
                                                <sf:errors path="companyLocation" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputCompanyName" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>公司名称:</label>

                                        <div class="col-md-4">
                                            <input id="inputCompanyName" name="companyName" type="text"
                                                   class="form-control"
                                                   placeholder="请按营业执照上填写" value="${userForm.companyName}"/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="companyName" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="form-group">
                                        <label for="inputCompanyAdress" class="col-md-2 control-label"><span
                                                class="text-danger"></span>详细地址:</label>

                                        <div class="col-md-4">
                                            <input id="inputCompanyAdress" name="companyAddr" type="text"
                                                   class="form-control"
                                                   placeholder="客户可以找到的地址" value="${userForm.companyAddr}"/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputCompanyContactName" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>联系人:</label>

                                        <div class="col-md-4">
                                            <input id="inputCompanyContactName" name="companyContactName" type="text"
                                                   class="form-control"
                                                   placeholder="你的称呼" value="${userForm.companyContactName}"/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="companyContactName" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputCompanyPhone" class="col-md-2 control-label"><span
                                                class="text-danger"></span>固定电话:</label>

                                        <div class="col-md-4">
                                            <input id="inputCompanyPhone" name="companyContactPhoneNo" type="tel"
                                                   class="form-control"
                                                   placeholder="如:020-81222322"
                                                   value="${userForm.companyContactPhoneNo}"/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="phoneNo" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputCompanyQQ" class="col-md-2 control-label"><span
                                                class="text-danger"></span>QQ:</label>

                                        <div class="col-md-4">
                                            <input id="inputCompanyQQ" name="companyQQ" type="text" class="form-control"
                                                   placeholder=""
                                                   data-role="tagsinput" value="${userForm.companyQQ}"/>

                                            <div class="help-block with-errors">
                                                <sf:errors path="companyQQ" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="sltShippingType" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>运输方式:</label>

                                        <div class="col-md-3">

                                        <select multiple class="selectpicker" name="companyShippingTypes"
                                                    id="sltShippingType"
                                                    title="请选择运输方式..." data-selected-text-format="count > 2">
                                                <c:forEach var="shippingType" items="${shippingTypes}">
                                                    <c:if test="${shippingType.lvl==1}">
                                                        <optgroup label="${shippingType.typeName}">
                                                            <c:forEach var="subShippingType" items="${shippingTypes}">

                                                                <c:if test="${subShippingType.lvl ==2 && subShippingType.parentId == shippingType.typeId}">
                                                                    <c:set var="isSelectedSippingType" value="false"/>
                                                                    <c:forEach var="selectedShippingType" items="${userForm.companyShippingTypes}" varStatus="index">
                                                                        <c:if test="${subShippingType.typeId== selectedShippingType.typeId}">
                                                                            <c:set var="isSelectedSippingType" value="true"/>
                                                                        </c:if>
                                                                    </c:forEach>
                                                                    <c:choose >
                                                                        <c:when test="${isSelectedSippingType==true}">
                                                                            <option  value="${subShippingType.typeId}"
                                                                            title="${shippingType.typeName}-${subShippingType.typeName}" selected>${subShippingType.typeName}</option>
                                                                        </c:when>
                                                                        <c:otherwise>
                                                                            <option  value="${subShippingType.typeId}"
                                                                            title="${shippingType.typeName}-${subShippingType.typeName}">${subShippingType.typeName}</option>
                                                                        </c:otherwise>

                                                                    </c:choose>

                                                                </c:if>

                                                            </c:forEach>
                                                        </optgroup>
                                                    </c:if>
                                                </c:forEach>

                                            </select>

                                            <div class="help-block with-errors">
                                                <sf:errors path="companyShippingTypes" cssClass="alert alert-danger"
                                                           element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            </c:if>

                            <c:if test="${userForm.userType==2}">
                            <!--发货用户的注册内容-->
                            <div class="panel" id="divSenderForm">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="inputSenderLocation" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>所在地:</label>

                                        <div class="col-md-4">
                                            <div class="input-group">

                                                <input id="inputSenderLocation"  name="senderLocation.locationName" type="text" class="form-control"
                                                       placeholder="" value="${userForm.senderLocation.locationName}" readonly/>
                                                <input id="inputSenderLocationHidden" name="senderLocation.locationId" type="hidden" value="${userForm.senderLocation.locationId}"/>
                                                <div class="input-group-btn">
                                                    <button id="btnSenderLocation" class="btn btn-default" type="button"><span
                                                            class="glyphicon glyphicon-globe"></span></button>
                                                </div>
                                            </div>
                                            <div class="help-block with-errors">
                                                <sf:errors path="senderLocation" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputSenderName" class="col-md-2 control-label"><span class="text-danger">*</span>联系人:</label>

                                        <div class="col-md-4">
                                            <input id="inputSenderName" name="senderName" type="text" class="form-control"
                                                   placeholder="你的称呼"  value="${userForm.senderName}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="senderName" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <label for="inputSenderPhone" class="col-md-2 control-label"><span class="text-danger"></span>固定电话:</label>

                                        <div class="col-md-4">
                                            <input id="inputSenderPhone" name="senderPhoneNo" type="tel" class="form-control"
                                                   placeholder="如：020-88218168"  value="${userForm.senderPhoneNo}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="senderPhoneNo" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputSenderQQ" class="col-md-2 control-label"><span
                                                class="text-danger"></span>QQ:</label>

                                        <div class="col-md-4">
                                            <input id="inputSenderQQ" name="senderQQ" type="text" class="form-control" placeholder=""
                                                   data-role="tagsinput"  value="${userForm.senderQQ}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="senderQQ" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputSenderRegularLine" class="col-md-2 control-label"><span
                                                class="text-danger"></span>常发路线:</label>
                                        <button id="inputSenderRegularLineBtn" class="btn btn-default" type="button"><span
                                                class="glyphicon glyphicon-globe">地图选择</span>
                                        </button>
                                        <div class="col-md-6">
                                            <input type="text" id="inputSenderRegularLine" name="senderRegularLine"
                                                   class="form-control"
                                                   placeholder="多个城市用逗号或空格分开,如:广州,佛山" value="${userForm.senderRegularLine}">

                                            </input>
                                            <div class="help-block with-errors">
                                                <sf:errors path="senderRegularLine" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            </c:if>

                            <c:if test="${userForm.userType>=3}">

                            <!--其他用户的注册内容-->
                            <div class="panel" id="divOtherForm">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label for="inputOtherLocation" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>所在地:</label>

                                        <div class="col-md-4">
                                            <div class="input-group">
                                                <input id="inputOtherLocation" name="otherLocation.locationName" type="text" class="form-control"
                                                       placeholder="" value="${userForm.otherLocation.locationName}" readonly/>
                                                <input id="inputOtherLocationHidden" name="otherLocation.locationId" type="hidden" value="${userForm.otherLocation.locationId}"/>
                                                <div class="input-group-btn">
                                                    <button id="btnOtherLocation" class="btn btn-default" type="button"><span
                                                            class="glyphicon glyphicon-globe"></span></button>
                                                </div>
                                            </div>
                                            <div class="help-block with-errors">
                                                <sf:errors path="otherLocation" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputOtherContactName" class="col-md-2 control-label"><span
                                                class="text-danger">*</span>联系人:</label>

                                        <div class="col-md-4">
                                            <input id="inputOtherContactName" name="otherName" type="text" class="form-control"
                                                   placeholder="你的称呼"  value="${userForm.otherName}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="otherName" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="form-group">
                                        <label for="inputOtherPhone" class="col-md-2 control-label"><span class="text-danger"></span>固定电话:</label>

                                        <div class="col-md-4">
                                            <input id="inputOtherPhone" name="otherPhone" type="tel" class="form-control"
                                                   placeholder="如：020-88218168" value="${userForm.otherPhone}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="otherPhone" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="inputOtherQQ" class="col-md-2 control-label"><span
                                                class="text-danger"></span>QQ:</label>

                                        <div class="col-md-4">
                                            <input id="inputOtherQQ" name="otherQQ" type="text" class="form-control" placeholder=""
                                                   data-role="tagsinput" value="${userForm.otherQQ}"/>
                                            <div class="help-block with-errors">
                                                <sf:errors path="otherQQ" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="txtAreaRemark" class="col-md-2 control-label"><span
                                                class="text-danger"></span>备注:</label>

                                        <div class="col-md-6">
                            <textarea id="txtAreaRemark" name="otherRemark" class="form-control"
                                      placeholder="">${userForm.otherRemark}</textarea>
                                            <div class="help-block with-errors">
                                                <sf:errors path="otherRemark" cssClass="alert alert-danger" element="div"></sf:errors>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            </c:if>

                            <div class="form-group">

                                <div class="col-md-offset-2 col-md-4">

                                    <button type="submit" class="btn btn-warning btn-block" id="btnRegister">保存</button>
                                </div>
                            </div>
                        </sf:form>

                    </div>
                </div>
            </div>
        </div>

    </div>


</div>



<!-- Large modal -->

<div id="myRegionSelectorModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">地区选择</h4>
            </div>
            <div class="modal-body">
                <div class="container" id="divRegionSelector"></div>
            </div>

        </div>
    </div>
</div>
<script src="${ctx}/statics/commonjs/typeahead.bundle.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.js"></script>
<%--<script src="${ctx}/statics/bootstrap/plugin/validator/dist/js/bootstrapValidator.min.js"></script>--%>
<%--<script src="${ctx}/statics/bootstrap/plugin/validator/dist/js/language/zh_CN.js"></script>--%>
<script src="${ctx}/statics/commonjs/validator.min.js"></script>
<script src="${ctx}/statics/echarts/echarts.min.js"></script>
<script src="${ctx}/statics/js/regionselector.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/js/bootstrap-select.min.js"></script>
<script type="application/javascript">
    $(function () {
        $("#myprofile-tab").addClass("active");


        var getUserTypeText = function (code) {
            switch (code) {
                case 1:
                    return '公司';
                case 2:
                    return '发货人';
                case 3:
                    return '收货人';
                case 4:
                    return '司机';
                case 5:
                    return '其他';
            }

        }



        var lines = new Bloodhound({
            identify: function (obj) {
                return obj.value;
            },
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
            //datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: 'http://localhost:8080/common/location/textvaluepair'
        });
        var promise = lines.initialize();


        var senderRegularLineTagsInput = $('#inputSenderRegularLine');
        senderRegularLineTagsInput.tagsinput({
            tagClass: function (item) {
                switch (item.value % 5) {
                    case 0   :
                        return 'label label-primary';
                    case 1   :
                        return 'label label-danger label-important';
                    case 2   :
                        return 'label label-success';
                    case 3   :
                        return 'label label-default';
                    case 4    :
                        return 'label label-warning';
                }
            },
            itemValue: 'value',
            itemText: 'text',
            maxTags: 10,
            typeaheadjs: {
                name: 'lines',
                displayKey: 'text',
                source: lines.ttAdapter()
            }
        });
        // elt.tagsinput('add', { "value": 1 , "text": "Amsterdam"   , "continent": "Europe"    });

        //重新加载lines Bloodhound#get(ids)
        var selectedRegularLineIds =senderRegularLineTagsInput.val();
        if(selectedRegularLineIds!=null &&selectedRegularLineIds!= undefined && selectedRegularLineIds !="")
        {
            $.get("http://localhost:8080/common/location/textvaluepair", {ids: selectedRegularLineIds}, function (data) {

                console.log(data);

                $.each(data,function(index,item){
                    senderRegularLineTagsInput.tagsinput('add', item);
                });

            }, 'json');
        }
        //路线输入 end



        //地图选择器
        var myRegionSelector = regionselector.init('divRegionSelector');
        myRegionSelector.click(function (param) {
            alert(param.value);

        });

        //$('#myRegionSelectorModal').modal();

        //公司地址选择
        $('#btnCompanyLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputCompanyLocation').val(param.text);
                $('#inputCompanyLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });
        //公司主营线路选择
        $('#inputMajorLineBtn').click(function (e) {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputMajorLine').tagsinput('add', param);
                $('#myRegionSelectorModal').modal('hide');
            });


        });


        //发货人地址选择
        $('#btnSenderLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputSenderLocation').val(param.text);
                $('#inputSenderLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });
        //发货人常发路线
        $('#inputSenderRegularLineBtn').click(function (e) {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputSenderRegularLine').tagsinput('add', param);
                $('#myRegionSelectorModal').modal('hide');
            });


        });
        //其他人地址选择
        $('#btnOtherLocation').click(function () {
            myRegionSelector.reset();
            $('#myRegionSelectorModal').modal();
            myRegionSelector.click(function (param) {
                $('#inputOtherLocation').val(param.text);
                $('#inputOtherLocationHidden').val(param.value);
                $('#myRegionSelectorModal').modal('hide');

            });
        });

    })


</script>